<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flex2</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  html,
  body {
    padding:0;
    margin:0;
  }
.HolyGrail {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: 1;
  height: 50px;
  background-color: #333333;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
  height: 400px;
}

.HolyGrail-content {
  flex: 1;
  background-color: #abcdef;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  background-color: pink;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

</style>
</head>
<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>
</html>